<!--
 * @Description: 因子库列表
 * @Author: qingyang
 * @Date: 2022-01-10 16:04:17
 * @LastEditors: qingyang
 * @LastEditTime: 2023-07-19 10:21:16
-->
<template>
  <div class="inventory-factor-list-container">
    <CPageTable @register="registerPage" v-model:searchForm="searchForm">
      <template #headerRightButton>
        <div class="g-flex-start-center">
          <el-button v-btnPermission="'ECI_GWP_QUERY'" @click="handleGwp">GWP管理</el-button>
          <el-button @click="handleDownloadTemplate"
            ><CIcon type="c-xian-xiazai" class="g-mr4"></CIcon>模板下载</el-button
          >
          <g-upload
            class="g-ml8"
            v-btnPermission="'ECI_FACTOR_BATCH_IMPORT'"
            :action="action1"
            ref="uploadRef"
            :show-file-list="false"
            :limit="100"
            accept=".xlsx, .xls"
            @success="handleUploadSuccess"
          >
            <template #default="{ loading: btnLoading }">
              <el-button type="primary" :loading="btnLoading"
                ><CIcon type="c-xian-daoru" class="g-mr4"></CIcon>批量导入</el-button
              >
            </template>
          </g-upload>
          <el-button
            class="g-ml8"
            v-btnPermission="'ECI_FACTOR_ADD'"
            type="primary"
            @click="addTask"
            ><CIcon type="c-xian-xinjian" class="g-mr4"></CIcon>新增</el-button
          >
        </div>
      </template>
      <template #factorNoSlot="{ scope }">
        <CTableColumn
          :main-text="scope.row.factorName"
          :sub-text="scope.row.factorNo"
          is-link
          @link-click="tdot(scope.row)"
        />
      </template>
      <template #typeSlot="{ scope }">
        <CTableColumn
          :main-text="factorTypeEnumx[scope.row.type as keyof typeof factorTypeEnumx]"
          :sub-text="FactorSourceTypeMap[scope.row.sourceType as keyof typeof FactorSourceTypeMap]"
        />
      </template>
      <template #sourceSlot="{ scope }">
        <CTableColumn :main-text="scope.row.source" :sub-text="scope.row.version" />
      </template>
      <template #statusSlot="{ scope }">
        <el-tag :type="renderTag(scope.row.status)">{{
          scope.row.status == 'ENABLE' ? '已启用' : '已停用'
        }}</el-tag>
      </template>
      <template #op="{ scope }">
        <CTableButtonGroup :buttons-config="getTableButtonsConfig(scope.row)" />
      </template>
    </CPageTable>
    <add-or-edit-task-dialog
      v-model:visible="addOrEditTaskVisible"
      @refresh="handleRefresh"
    ></add-or-edit-task-dialog>
    <detail v-model:visible="detailVisible" :info="infoDetail"></detail>
    <update-list v-model:visible="updateListVisible" :info="updateListInner"></update-list>
  </div>
</template>
<script lang="ts">
export default {
  name: 'FactorInventory'
};
</script>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useFactorList } from './useFactorList';
import { empty } from '@/utils/index';
import { factorTypeEnumx, FactorSourceTypeMap } from '@/constants/enum';
import AddOrEditTaskDialog from './components/AddOrEditTaskDialog/index.vue';
import updateList from './components/updateList/index.vue';
import Detail from './components/detail/index.vue';
import { useMessage } from '@/hooks/useMessage';
import { useTemplateFile } from '@/hooks/useTemplateFile';
import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';
import { CTableColumn, CTableButtonGroup } from '@/components/CTable';
import type { TableButtonItem } from '@/components/CTable';
import { updateStatus, uploadFilePostUrl } from '@/apis/system/config/factorList';
import { GUpload } from '@/components/GUpload/index';
import { useRouter } from 'vue-router';

const action1 = uploadFilePostUrl;
const uploadRef = ref();
const { createConfirm, createMessage } = useMessage();
const { searchOptions, searchForm, tableOptions, tableFieldsSetting } = useFactorList();
const { handleDownloadTemplate } = useTemplateFile('INVENTORY_FACTOR_TEMPLATE', 'inventoryFactor');
const addOrEditTaskVisible = ref(false);
const detailVisible = ref(false);
const updateListVisible = ref(false);
const infoDetail = ref();
const updateListInner = ref();

const options = reactive<CPageTableProps>({
  title: '碳盘查因子库',
  searchOptions: searchOptions,
  tableOptions,
  tableFieldsSetting,
  enableFieldsSetting: true
});
// 计算loading
const calcLoading = ref(false);

const [registerPage, { refresh }] = useCPageTable(options);
const router = useRouter();
const addTask = () => {
  addOrEditTaskVisible.value = true;
};
const tdot = (row: any) => {
  infoDetail.value = row;
  detailVisible.value = true;
};
const handleRefresh = () => {
  // refreshSearchOptions(3);
  refresh(true);
};
const renderTag = (status: string) => {
  switch (status) {
    case 'ENABLE':
      return 'success';
    default:
      return 'info';
  }
};
const handelUpdate = (row: any) => {
  let flag = row.status;
  createConfirm(
    flag == 'ENABLE' ? '确认停用？' : '确认启用？',
    flag == 'ENABLE'
      ? '当前数据停用后，将无法在系统中进行匹配使用，归档数据不受影响。'
      : '确认启用当前数据。',
    {
      iconType: flag == 'ENABLE' ? 'warning' : '',
      confirmButtonText: flag == 'ENABLE' ? '停用' : '启用'
    }
  ).then(async () => {
    updateStatus({
      factorNo: row.factorNo,
      status: row.status == 'ENABLE' ? 'DISABLE' : 'ENABLE'
    }).then((res: any) => {
      createMessage.success('成功修改状态');
      refresh();
    });
  });
};
const handleUploadSuccess = (file: any) => {
  console.log('handleUploadSuccess', file);
  if (file.response.msg == '成功') {
    createMessage.success('上传成功');
    refresh();
  } else {
    createMessage.info('上传失败');
  }
  // uploadRef.value?.clearFiles();
};

/**
 * 配置表格的按钮
 * @param row 表格行数据
 */
function getTableButtonsConfig(row: any): TableButtonItem[] {
  return [
    {
      text: row.status == 'ENABLE' ? '停用' : '启用',
      btnPermission: 'ECI_FACTOR_UPDATE',
      onClick: () => handelUpdate(row)
    }
  ];
}
const handleGwp = () => {
  router.push('/system/configManagement/gwp');
};
</script>

<style lang="scss" scoped>
.inventory-factor-list-container {
  min-height: 80%;
}
</style>
